<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>车辆查询</title>
    <link type="text/css" href="<c:url value='/resource/wx/newcss/common.css'/>" rel="stylesheet"/>
    <link rel="stylesheet" href="<c:url value='/resource/wechat/css/frozen.css'></c:url>">
    <script type="text/javascript" src="<c:url value='/resource/js/jquery-2.0.min.js'/>"></script>
    <script type="text/javascript" src="https://gaapi.jl.gov.cn/web/resource/js/os.analystic-1.1.min.js"></script>
    <script type="text/javascript" src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="<c:url value='/resource/js/common.js'/>" type="text/javascript"></script>

    <script type="text/javascript">
        var _preFix = getServerPreFix();
        //区域编码
        var cid = returnCitySN["cid"];
        var cip = returnCitySN["cip"];
        // 平台、不需传
        var category = "";
        cid = PrefixInteger(cid,12);

        // 区域代码12位、不足前面补0
        function PrefixInteger(num, length) {
            return (Array(length).join('0') + num).slice(-length);
        }

        //日志组件初始化[必须调用]
        var logger = Oceansoft.analy.init({
            'appId': '1001',
            'regionId': cid,
            'category': category
        });

        /**
         * Form表单日志统计
         */
        function formSubmit() {
//            var logData = "{'tag':'100005','category':'"+category+"','oper':'','oper_id':'','ip':'" + cip + "','title':'','ext':''}";
//            logger.start();
//            logger.log('100005', logger.ACTION.CREATE, logData);
            return true;
        }

        function check() {
//            var pushId = $("#pushId").val().trim();
//            var pushType = $("#pushType").val().trim();
            var rep = /[A-Z]{1}[A-Z_0-9_学_挂]{5}$/;
            var rep_num = /[a-z_A-Z_0-9_\-]{4}/;
            var jdchphm = $("#jdchphm").val().trim().toUpperCase();
            var fdj = $("#fdj").val().trim().toUpperCase();
            var firnull = "车牌号不能为空";
            var secnull = "车辆识别代码不能为空";
            var firformet = "车牌号格式不正确";
//            var secformet = "请输入发动机后六位";

            if (jdchphm == null || jdchphm == "") {
                toast(firnull, 1500);
                return false;
            } else if (fdj == null || fdj == "") {
                toast(secnull, 1500);
                return false;
            } else if (!rep.test(jdchphm)) {
                toast(firformet, 1500);
                return false;
            }
//            else if (!rep_num.test(fdj)) {
//                toast(secformet, 1500);
//                return false;
//            }
            else {
                var jdccllxbm = $("#jdccllxbm").val().trim();
                var html = "";
                $.ajax({
                    url: "<c:url value='/api/query/vehicle/clcx'/>",
                    type: "post",
                    data: {"jdccllxbm": jdccllxbm, "fdj": fdj, "jdchphm": jdchphm},
                    beforeSend: function () {
                        loading();
                    },
                    success: function (data) {
                        if("-1"!=data.data.zt){

                            html += '<div><p>号牌号码：'+data.data.hphm+'</p>' +
                                    '<p>号牌种类：' +$("#jdccllxbm").find("option:selected").text()+'</p>'+
                                    '<p>校验截至日期：' +data.data.yxqz+'</p>'+
                                    '<p>保险终止日期：' +data.data.bxzzrq+'</p>'+
                                    '<p>违法未处理条数：'+data.data.zt+'条</p></div><hr/>';
                       }else{
                            html+="<div><p style='align:center'>暂无结果，重新查询</p></div>"
                        }


                        finish();
                        formSubmit();
                        $("#result").html(data.msg);
                        $("#results").html(html);
//                        $("#btn_query").remove();
                    },
                    error: function () {
                     check();
                    },


                });
            }

        }

        function hiden() {
            $(".toast").hide();
        }
    </script>

    <style type="text/css">
        body {
            font-family: "微软雅黑";
        }

        .body_bg {
            background-color: #efefef
        }

        .bg_fff {
            background-color: #FFFFFF
        }

        .text_main {
            padding: 10px;
            padding-top: 0px;
            font-size: 16px;
            color: #333;
        }

        .search_table {
            width: 100%;
            font-size: 16px;
            color: #333;
        }

        .search_table td {
            height: 30px;
            line-height: 30px;
            text-align: left;
            text-indent: 10px;
        }

        .ui-form-item label:not(.ui-switch):not(.ui-checkbox):not(.ui-radio) {
            width: 126px;
        }

        .toast {
            display: none;
            position: absolute;
            bottom: 100px;
            text-align: center;
            width: 170px;
            white-space: nowrap;
            font-size: 1.0em;
            padding: 0.7em 1em 0.9em 1em;
            color: #fff;
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.67);
            border: none;
            width: -moz-fit-content;
            width: -webkit-fit-content;
            height: -webkit-fit-content;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            border: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>

<body ontouchstart>

<%--<c:if test="${pt != 'I'}">
    <header class="ui-header ui-header-positive ui-border-b">
        <i class="ui-icon-return" onclick="history.back()"></i>
        <h1>机动车违法查询</h1>
    </header>
</c:if>--%>

<section class="ui-container">

    <div class="ui-form ui-border-t">
        <form action="#">

            <div class="ui-form-item ui-border-b">
                <label>品牌种类：</label>
                <div class="ui-select">
                    <select id="jdccllxbm" name="jdccllxbm">
                        <c:forEach var="carType" items="${carTypelist}" varStatus="vs">

                            <option value="${carType.code}"
                                    <c:if test="${carType.code eq '02'}">selected</c:if> >${carType.name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="ui-form-item ui-border-b" style="position: relative;">
                <label>
                    号牌号码：黑
                </label>
                <input id="jdchphm" name="jdchphm" type="text" style="padding-left: 105px;" maxLength="6"
                       placeholder="请输入六位车牌号" onkeyup="this.value=this.value.toUpperCase()" onfocus="hiden()"/>
            </div>

            <div class="ui-form-item ui-border-b">
                <label style="width: 128px;">
                    车辆识别代码：
                </label>
                <input id="fdj" name="fdj" type="text" style="padding-left: 128px;" maxLength="17" onfocus="hiden()"
                       placeholder="请输入车辆识别代码" onkeyup="this.value=this.value.toUpperCase()"/>
            </div>

        </form>

    </div>

    <div class="ui-btn-wrap">
        <%--<input type="hidden" name="pushId" id="pushId" value="${pushId}" />--%>
        <%--<input type="hidden" name="pushType" id="pushType" value="${pushType}" />--%>
        <button class="ui-btn-lg ui-btn-primary" id="btn_query" onclick="check();">
            查询
        </button>
    </div>
    <div id="toast" class="toast" style="font-size: 1.0em;"></div>
    <div class="ui-form-item ui-border-b" id="result"></div>
    <div class="ui-form-item ui-border-b" id="results"></div>
</section>
</body>

</html>